<template>
  <div class="home">
   <h2>name:{{ name }}</h2>
   <h2>age：{{age}}</h2>
   <h2>level:{{ level }}</h2>
   <button @click="changeUser">修改user</button>
   <button @click="resetUser">resetUser</button>
   <button @click="patchhUser">patchUser</button>
   <button @click="statehUser">statehUser</button>
  </div>
</template>

<script setup>
import useUser from "../stores/user"
import { storeToRefs } from "pinia";
const user=useUser()
const {name,age,level}=storeToRefs(user)
function changeUser(){
  user.name="kobe"
  user.age=19
  user.level=111
}
function resetUser(){
  user.$reset()
}
//改变State
//除了直接用 store.counter++ 修改 store，你还可以调用 $patch 方法
// 它允许您使用部分“state”对象同时应用多个更改
function patchhUser(){
 user.$patch({
    name:"jmx",
    age:28,
    level:10000
  })
}
//替换State：
//您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：
function statehUser(){
 user.$state={
    name:"张三",
    age:99,
    level:1,
    height:199
  }
}

</script>

<style scoped></style>
